<template>
  <div>
    <top></top>

    <!-- <div class="Back">
      <a
        href="productForm?productId=${sessionScope.product.productId}"
        class="BackLink"
      >
        <i class="fa-solid fa-circle-left"></i>
        Return to ${sessionScope.product.productId}
      </a>
    </div> -->

    <div
      v-if="item != null"
      class="Item"
      style="margin: 0 auto; padding-bottom: 30px"
    >
      <table
        valign="middle"
        style="
          border-top: 5px solid rgb(245 153 162);
          border-bottom: 5px solid rgb(245 153 162);
          padding: 20px;
        "
        align="center"
      >
        <tr>
          <td rowspan="3" colspan="2" style="text-align: center" width="200px">
            {{ "productId: " + item.productId }}
          </td>
          <td
            colspan="2"
            style="
              text-align: center;
              background: rgb(255, 255, 255);
              border-radius: 10px;
            "
          >
            <b>{{ item.itemId }}</b>
          </td>
        </tr>
        <tr>
          <td
            colspan="2"
            style="
              text-align: center;
              background: rgb(255, 255, 255);
              border-radius: 10px;
            "
          >
            <b>{{ item.quantity }}</b>
          </td>
        </tr>
        <div v-if="item.quantity > 10000">
          <tr>
            <td
              colspan="2"
              style="
                text-align: center;
                background: rgb(255, 255, 255);
                border-radius: 10px;
              "
            >
              <b>{{ item.quantity }} in stock.</b>
            </td>
          </tr>
        </div>
        <div v-else>
          <tr>
            <td
              colspan="2"
              style="
                text-align: center;
                background: rgb(255, 255, 255);
                border-radius: 10px;
                border: 100px solid #000000;
              "
            >
              <b>{{ item.quantity }} in stock.</b>
            </td>
          </tr>
        </div>

        <tr>
          <td colspan="4" style="text-align: center">
            <b>
              {{ item.attribute1 }}
              {{ item.attribute2 }}
              {{ item.attribute3 }}
              {{ item.attribute4 }}
              {{ item.attribute5 }}
              {{ item.productId }}
            </b>
          </td>
        </tr>
        <tr>
          <td
            colspan="2"
            style="
              text-align: center;
              font-size: 50px;
              color: #ff0000;
              background: rgb(255, 255, 255);
              border-radius: 100px;
            "
          >
            <b>
              {{ item.listPrice }}
            </b>
          </td>
          <td colspan="2" style="text-align: center">
            <div class="ButtonDiv">
              <a @click="addItemToCart(item.itemId)" class="Button">
                <i class="fa-solid fa-cart-shopping"></i>Add to Cart
              </a>
            </div>
          </td>
        </tr>
      </table>
    </div>

    <bottom></bottom>
  </div>
</template>

<script>
import Bottom from "../common/Bottom.vue";
import Top from "../common/Top.vue";
import { refreshCarts } from "../../utils/cart";
import { mapState } from "vuex";
export default {
  components: {
    Bottom,
    Top,
  },
  data() {
    return {
      id: null,
      item: null,
    };
  },
  methods: {
    getItemById(itemId) {
      this.$http
        .get(`items/${itemId}`)
        .then((res) => {
          console.log(res);
          this.item = res.data.data;
          // console.log("item " + this.item);
        })
        .catch((error) => {
          console.log(error);
        });
    },

    addItemToCart(itemId) {
      this.$http
        .post(`/carts/${this.account.userId}/items/${itemId}`)
        .then(async (res) => {
          console.log(res);
          let { status } = res.data;
          if (status == 0) {
            // 刷新购物车
            await refreshCarts();
            this.$notify({
              title: "添加成功",
              type: "success",
            });
          } else {
            this.$notify.error({
              title: "添加失败",
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // goRouter(name) {
    //   this.$router.push({ name: name });
    // },
    // goRouterPath(path) {
    //   this.$router.push({ path: path });
    // },
  },
  mounted() {
    console.log(this.$route.params.type);
    this.id = this.$route.params.type;
    this.getItemById(this.id);
  },
  computed: {
    ...mapState({
      account: (state) => JSON.parse(state.account),
    }),
  },
};
</script>

<style scoped></style>
